<template>
  <div id="editorHeader">
    <div class="editorHeaderWrp">
      <nav class="nav">
        <!-- logo图 -->
        <img class="logo" src="@/images/logo.png" alt="logo" />
        <!-- 个人中心按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 0 && 'select'" @click="setNav(0)">
          个人中心
        </button>
        <!-- 优质笔记按钮，根据nowNav显示不同的样式 -->
        <button :class="nowNav === 1 && 'select'" @click="setNav(1)">
          优质笔记
        </button>
      </nav>
      <h2 class="noteTitle">{{noteInfo.title}}</h2>
      <div class="editorFunction">
        <span>已保存</span>
        <div class="share">
          <i class="iconfont icon-fenxiang"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditorHeader",
  data() {
    return {
      // 当前选择的导航页
      nowNav: -1,
    };
  },
  props:["noteInfo"],
  methods: {
    // 导航，0为个人中心，1为优质笔记
    setNav(index) {
      // 如果当前登录模式不为index
      if (this.nowNav !== index) {
        // 切换当前选择的导航页
        this.nowNav = index;
        // 0表示用户主页，1表示优质笔记页
        if (this.nowNav === 0) {
          this.$router.push("/user");
        } else {
          // this.$router.push("/notelibrary");
        }
        // 隐藏更多列表
        // this.isShowMore = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
#editorHeader {
  // 宽高
  width: 100%;
  height: 60px;
  // 背景颜色
  background-color: white;
  // 固定定位
  position: fixed;
  //   距顶部0px
  top: 0;
  //   层级
  z-index: 1;
  display: flex;
  justify-content: center;
  .editorHeaderWrp {
    width: 1024px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    // 导航栏
    .nav {
      // 绝对定位
      // position: absolute;
      //   距左边0px
      // left: 0;
      //   高
      height: 100%;
      //   弹性盒
      display: flex;
      //   垂直居中
      align-items: center;
      .logo {
        // 宽高
        width: 35px;
        height: 35px;
        // 右外边距20px
        margin-right: 20px;
        // background-image: url("../images/logo.png");
      }
      // 标签按钮
      button {
        // 高
        height: 100%;
        // 字体大小
        font-size: 14px;
        // font-weight: bold;
        // 背景颜色
        background-color: transparent;
        // 内边距
        // padding: 5px 0;
        // 右外边距
        margin-right: 20px;
        // 小手
        cursor: pointer;
        // 字体颜色
        color: #3c3c3c;
        // 宽高为内容区大小
        // box-sizing: content-box;
        border-bottom: 3px solid #fff;
        &:hover {
          color: #0182c7;
        }
      }
      // 选中时的样式
      .select {
        // 粗体
        font-weight: bold;
        // 字体颜色
        color: #0182c7;
        // 底部边框
        border-bottom: 3px solid #0182c7;
      }
    }
    .noteTitle{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 20px;
      color: #0182c7;
      font-weight: normal;
    }
    .editorFunction {
      display: flex;
      align-items: center;
      span {
        font-size: 14px;
        color: #0182c7;
      }
      .share {
        padding: 2px 6px;
        border-radius: 5px;
        background-color: #e3f4fd;
        cursor: pointer;
        margin-left: 10px;
        color: #3c3c3c;
        i {
          font-size: 20px;
        }
        &:hover {
          color: #0182c7;
        }
      }
    }
  }
}
// 当窗口小于1024px时
@media (max-width: 1024px) {
  #editorHeader {
    //   头部容器
    .editorHeaderWrp {
      // 宽度
      width: 100%;
      padding: 0 20px;
      //   导航条
      // .nav {
      //   //   距左边
      //   margin-left: 20px;
      // }
    }
  }
}
</style>